<template>
  <div class="data_statis">
    <ContentBox title="数据统计" @left="back" :fixed="true" :ostyle="style" titlecolor="black">
      <template slot="oleft"><van-icon color="#000" name="arrow-left"/></template>
    </ContentBox>
    <notice class="not"></notice>
    <div class="tab">
      <nav>
        <span class="item" :class="tabIndex== 1? 'active': ''" @click="getTabIndex(1)">销售统计</span>
        <span class="item"  :class="tabIndex== 2? 'active': ''" @click="getTabIndex(2)">订单统计</span>
        <span class="item"  :class="tabIndex== 3? 'active': ''" @click="getTabIndex(3)">地区销售</span>
        <span class="item"  :class="tabIndex== 4? 'active': ''" @click="getTabIndex(4)">热销商品</span>
        <span class="icon" v-if="tabIndex== 1">
          <van-icon name="arrow-down" color="#000000" size="0.32rem" v-if="viewShow" @click="getIndexState(false, 'viewShow')"/>
          <van-icon name="arrow-up" color="#000000" size="0.32rem" v-else  @click="getIndexState(true, 'viewShow')"/>
        </span>
        <span class="icon" v-if="tabIndex== 3">
          <van-icon name="arrow-down" color="#000000" size="0.32rem" v-if="showFlow" @click="getIndexState(false, 'showFlow')"/>
          <van-icon name="arrow-up" color="#000000" size="0.32rem" v-else  @click="getIndexState(true, 'showFlow')"/>
        </span>
        <span class="icon" v-if="tabIndex== 4">
          <van-icon name="arrow-down" color="#000000" size="0.32rem" v-if="showing" @click="getIndexState(false, 'showing')"/>
          <van-icon name="arrow-up" color="#000000" size="0.32rem" v-else  @click="getIndexState(true, 'showing')"/>
        </span>
      </nav>
      <div v-if="!viewShow && tabIndex==1 || tabIndex==3 && !showFlow || tabIndex==4 && !showing" class="option">
        <div class="info">
          <p class="title">时间</p>
          <div class="year" v-if="tabIndex==1 || tabIndex==3  || tabIndex==4">
            <div class="data" v-if="tabIndex==1 || tabIndex==3 || tabIndex==4">
              <div class="date" @click="loadShow = !loadShow">{{year}}年<span></span></div>
              <div class="box" v-if="loadShow">
                <div class="detail" v-for="(item,index) in option" :key="index" @click="getItemIndex(item)">
                  {{item}}
                </div>
              </div>
            </div>
            <div class="data" v-if="tabIndex==3 || tabIndex==4">
              <div class="date" @click="mouthLoad = !mouthLoad">{{month}}月<span></span></div>
              <div class="box" v-if="mouthLoad">
                <div class="detail" v-for="(item,index) in mouthData" :key="index" @click="getMouthIndex(item)">
                  {{item}}
                </div>
              </div>
            </div>
          </div>
          <div class="btn">
            <div class="colse" v-if="tabIndex==1" @click="getIndexState(true, 'viewShow')">收起</div>
            <div class="colse" v-if="tabIndex==3" @click="getIndexState(true, 'showFlow')">收起</div>
            <div class="colse" v-if="tabIndex==4" @click="getIndexState(true, 'showing')">收起</div>
            <div class="save"  v-if="tabIndex==1" @click="save">确定</div>
            <div class="save"  v-if="tabIndex==4" @click="buy">确定</div>
            <div class="save"  v-if="tabIndex==3" @click="ensure">确定</div>
          </div>
        </div>
      </div>
    </div>

    <div class="item1" v-if="tabIndex==1">
      <div class="deal">
        <div>交易额: {{totalPrice}}</div>
        <div>最高交易额: <span>{{MaxPrice}}</span></div>
      </div>
      <div class="select">
        <div class="header">
          <span>月份</span>
          <span>交易</span>
          <span>所占比例</span>
        </div>
        <div class="list" v-for="(item,index) in sell" :key="index">
          <span>{{index}}</span>
          <span>￥{{item}}</span>
          <span>{{getPercent(item)}}%</span>
        </div>
      </div>
    </div>

    <div class="item2" v-if="tabIndex==2">
      <div class="tabs">
        <div class="save-data">
          <div>今日订单</div>
          <div>人均消费: <span>￥{{todayData}}</span></div>
        </div>
        <div class="apply">
          <div class="detail">
            <div>{{data.today_count}}</div>
            <div>成交量</div>
          </div>
          <div class="detail">
            <div>￥{{data.today_price}}</div>
            <div>成交额</div>
          </div>
        </div>
      </div>
      <div class="tabs">
        <div class="save-data">
          <div>昨日订单</div>
          <div>人均消费: <span>￥{{yesterdayData}}</span></div>
        </div>
        <div class="apply">
          <div class="detail">
            <div>{{data.yesterday_count}}</div>
            <div>成交量</div>
          </div>
          <div class="detail">
            <div>￥{{data.yesterday_price}}</div>
            <div>成交额</div>
          </div>
        </div>
      </div>
      <div class="tabs">
        <div class="save-data">
          <div>本月订单</div>
          <div>人均消费: <span>￥{{totalData}}</span></div>
        </div>
        <div class="apply">
          <div class="detail">
            <div>{{data.month_count}}</div>
            <div>成交量</div>
          </div>
          <div class="detail">
            <div>￥{{data.month_price}}</div>
            <div>成交额</div>
          </div>
        </div>
      </div>
    </div>

    <div class="item1" v-if="tabIndex==3">
      <div class="select">
        <div class="header">
          <span>省份</span>
          <span>交易额</span>
        </div>
        <div class="list" v-for="(item,index) in area" :key="index">
          <span>{{index}}</span>
          <span>￥{{item.sum}}</span>
        </div>
      </div>
    </div>

    <div class="shop_hot" v-if="tabIndex==4">
      <div class="item-container" v-for="(item,index) in collectList" :key="index">
        <van-image class="pic" :src="item.image" @click="toDetail(item.id)">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error></template>
        </van-image>
        <div class="detail" @click="toDetail(item.id)">
          <div class="title van-multi-ellipsis--l2">{{item.store_name}}</div>
          <div class="info">
            <p class="buy">{{item.p_count}}人购买</p>
            <p class="price">￥{{item.price}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      style: {
        background: '#ffffff'
      },
      tabIndex: 1,
      viewShow: true,
      loadShow: false,
      showFlow: true,
      mouthLoad: false,
      showing: true,
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      option: [new Date().getFullYear(), new Date().getFullYear() - 1, new Date().getFullYear() - 2],
      mouthData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      data: {},
      sell: {},
      area: {},
      page: 1,
      last_page: 100,
      collectList: []
    }
  },
  computed: {
    todayData () {
      let data = this.data.today_price / this.data.today_count
      if (this.data.today_price === 0 || this.data.today_count === 0) {
        data = 0.00
      }
      return data
    },
    yesterdayData () {
      let data = this.data.yesterday_price / this.data.yesterday_count
      if (this.data.yesterday_price === 0 || this.data.yesterday_count === 0) {
        data = 0.00
      }
      return data
    },
    totalData () {
      let data = Math.ceil(this.data.month_price / this.data.month_count)
      if (this.data.month_price === 0 || this.data.month_count === 0) {
        data = 0.00
      }
      return data
    },
    totalPrice () {
      let num = 0
      Object.keys(this.sell).forEach(key => {
        num += this.sell[key]
      })
      return num
    },
    MaxPrice () {
      let arr = Object.values(this.sell)
      let price = Math.max(...arr)
      return price
    }
  },
  methods: {
    back () {
      if (this.$store.state.pl === 'H5') {
        this.$router.go(-1)
      } else if (this.$store.state.pl === 'ANDROID') {
        AndroidJsBridge.finish()
      } else if (this.$store.state.pl === 'IOS') {
        window.iosCallHandler('popVC')
      }
    },
    getTabIndex (index) {
      this.tabIndex = index
    },
    getIndexState (state, data) {
      this[data] = state
    },
    getItemIndex (item) {
      this.year = item
      this.loadShow = false
    },
    getMouthIndex (item) {
      this.month = item
      this.mouthLoad = false
    },
    getOrderNum () {
      this.$axios.get('/api/merchant/total/order').then(res => {
        if (res.status === 200) {
          this.data = res.data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getSellTotal () {
      this.$axios.get('/api/merchant/total/sell', {
        params: {
          year: this.year
        }
      }).then(res => {
        // console.log(res.data)
        if (res.status === 200) {
          this.sell = res.data.alldata
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getAreaData () {
      this.$axios.get('/api/merchant/total/area', {
        params: {
          year: this.year,
          month: this.month
        }
      }).then(res => {
        if (res.status === 200) {
          this.area = res.data.area
        }
      }).catch(err => {
        console.log(err)
      })
    },
    save () {
      this.getSellTotal()
      this.viewShow = true
    },
    ensure () {
      this.getAreaData()
      this.showFlow = true
    },
    buy () {
      this.getCollectList()
      this.showing = true
    },
    getPercent (item) {
      let total = 0
      Object.keys(this.sell).forEach(key => {
        total += this.sell[key]
      })
      if (total > 0) {
        return (Math.round(item / total * 10000) / 100.00)
      } else {
        total = 0
        return total
      }
    },
    getCollectList () {
      this.$axios.get('/api/merchant/total/hot', {
        params: {
          year: this.year,
          month: this.month
        }
      }).then(res => {
        console.log(res)
        if (res.status === 200) {
          this.collectList = res.data.orderlist.list
        }
      })
    },
    toDetail (id) {
      this.$router.push(`/productDetail/${id}`)
    }
  },
  mounted () {
    this.getOrderNum()
    this.getSellTotal()
    this.getCollectList()
    this.getAreaData()
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>
